<template>
  <div class="knowledge-list">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <KnowledgeCard :item="item" v-for="item in list" :key="item.id" />
    </van-list>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import KnowledgeCard from './KnowledgeCard.vue'
import { getKnowledgeListRequest } from '@/services/home'

const props = defineProps<{
  type: string
}>()

// 加载中的时候，是true，加载完毕是false； 每次滚动到底部的时候，插件自动帮我们把这个值改为true
const loading = ref<boolean>(false)
// 数据是否加载完毕，如果加载完毕，即使触底了也不会在发请求，本质上就是loading不会在自动变为true，也不会在发请求
const finished = ref<boolean>(false)
// 列表的数组元素
const list = ref<any[]>([])
const total = ref(0)
const current = ref(1)

// promise  .then .catch和 async + await 代码两种格式的转换
// getKnowledgeListRequest({
//   type: 'food',
//   current: 1,
//   pageSize: 10
// })
//   .then((res) => {
//     console.log(res)
//     list.value = res.data.rows
//     total.value = res.data.total
//   })
//   .catch((err) => {
//     console.log(err)
//   })

const onLoad = async () => {
  // 一旦触底就 自动触发onLoad函数，调用它。 还有会自动将loading改为true
  const res = await getKnowledgeListRequest({
    type: props.type,
    current: current.value,
    pageSize: 10
  })
  current.value++
  // 代码到了这里，表明请求已经结束，应该将loading再改为false， 请求结束
  loading.value = false
  // Ref<> 下面代码数js的代码，不符合vue3的响应式
  // list.value = [...list.value, ...res.data.rows]
  list.value.push(...res.data.rows)
  total.value = res.data.total

  // 最后在做一个结束条件的判断， 数据和total比较，如果全部加载完毕，就不在请求
  if (list.value.length >= total.value) {
    // 数据加载完毕，进入这个语句
    finished.value = true
  }
}

// 每次触底执行的函数 -----  顺便将loading修改为true
// const onLoad = () => {
//   // 写一个定时器模拟异步请求
//   setTimeout(() => {
//     // list.value = [...res.data, ...list.value]
//     list.value = [...list.value, ...[4, 5, 6]]

//     // 2s钟以后，请求结束，需要手动将loading 修改为false
//     // 这句话比较关键，每次请求完毕都需要手动修改为false； 方便下次页面触底的时候，由组件自动将它设置为true，然后发请求。如果是false不改为true，那么后面就不会发请求了，就卡住了
//     loading.value = false

//     // 一个列表肯定不能无限上拉加载， 写一个判断条件，如果数据加载完毕，就不让它在下拉了
//     if (list.value.length > 10) {
//       // 只要进了这里，表明列表数据请求完毕，在下拉也不会触发onload函数，loading也不会被修改为true
//       finished.value = true
//     }
//   }, 200)
// }
</script>

<style lang="scss" scoped>
.knowledge-list {
  padding: 0 15px;
}
</style>
